<template>
    <div class="main">
        <!-- 增加内容区 -->
        <div>
            <a-button type="primary" icon="plus" ype="primary" @click="showModal">添加资源</a-button>
            <a-modal title="请输入以下内容" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
                @cancel="handleCancel">
                <a-form>
                    <a-input placeholder="请输入添加内容名称" class="addinput" v-model="add.data_name"></a-input>
                    <a-input placeholder="请输入添加内容" class="addinput" v-model="add.data_link"></a-input>
                </a-form>
            </a-modal>
        </div>
        <!-- 下拉框 -->
        <!-- :defaultValue="1" -->
        <a-select placeholder="请选择部门信息" style="width: 10%;margin-top: 10px;" :defaultValue="[0]">
            <a-select-option @click.native="getDeptMsg(index)" v-for="(item, index) in deptMsg" :key="index">
                {{ item.name }}
            </a-select-option>
        </a-select>
        <div>
            <!-- 定时任务信息展示 -->
            <tr class="top">
                <td>上传人</td>
                <td>资源名称</td>
                <td>资源内容</td>
                <td>操作</td>
            </tr>
            <!-- 内容展示 -->
            <tr class="top content" v-for="(item, index) in msgList" :key="index">
                <td>{{ item.user_name }}</td>
                <td>{{ item.data_name }}</td>
                <td>{{ item.data_link }}</td>
                <td>
                    <a-button type="primary" @click="showModals(index)" icon="undo">修改</a-button>
                    <a-modal title="请填写一下内容" :visible="visibles" :confirm-loading="confirmLoadings" @ok="handleOks"
                        @cancel="handleCancels">
                        <a-form>
                            <!-- <a-input placeholder="请输入添加内容名称" class="addinput" v-model="changeList.data_name"></a-input> -->
                            <a-input class="addinput" v-model="oldziyuan" :disabled="true"></a-input>
                            <a-input placeholder="请输入新的资源内容" class="addinput" v-model="changeList.data_link"></a-input>
                        </a-form>
                    </a-modal>

                    <a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No" @confirm="confirm">
                        <a-button type="danger" style="margin-left: 15px;" @click="remove(index)"
                            icon="delete">删除</a-button>
                    </a-popconfirm>
                </td>
            </tr>
        </div>
    </div>
</template>

<script>
import { reqAddDeptMsg, reqRemoveDeptMsg, reqChangeDeptMsg, reqGetDeptMsg, reqGetDeptId } from '@/api/index'
export default {
    data() {
        return {
            // 用来获取本人部门信息中的ID
            deptMsg: [],
            dept_id: '',
            // 获取列表数据相关
            askMsg: {
                type: 2,
                dept_id: 0
            },
            msgList: [],
            // 增加相关
            visible: false,
            confirmLoading: false,
            add: {
                type: 2,
                data_name: '',
                data_link: '',
                dept_id: 0
            },
            // 删除相关
            removeList: {
                type: 2,
                data_name: "",
                data_link: "",
                dept_id: 0,
                user_name: ""
            },
            // 修改相关
            visibles: false,
            confirmLoadings: false,
            oldziyuan: '',
            changeList: {
                type: 2,
                old_data_name: "",
                data_name: "",
                data_link: "",
                user_name: '',
                dept_id: ''
            }
        }
    },
    methods: {
        // 获取列表相关
        getList() {
            reqGetDeptMsg(this.askMsg).then((res) => {
                this.msgList = res.data
                console.log(this.msgList);
            })
        },
        // 用来获取部门id
        getDeptMsg(index) {
            this.askMsg.dept_id = this.deptMsg[index].dept_id
            this.dept_id = this.deptMsg[index].dept_id
            console.log(this.askMsg.dept_id);
            this.getList()
        },
        // 增
        showModal() {
            this.visible = true;
            this.add.dept_id = this.dept_id
            console.log(this.add);
        },
        handleOk(e) {
            this.confirmLoading = true;
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 500);
            reqAddDeptMsg(this.add).then((res) => {
                console.log(res);
                setTimeout(() => {
                    if (res.code == 0) {
                        this.getList()
                        this.$message.success('添加资源成功');
                    } else {
                        this.$message.error('添加资源失败');
                    }
                }, 600);
            })
            setTimeout(() => {
                this.getList()
            }, 200);
        },
        handleCancel(e) {
            this.visible = false;
        },
        // 删
        remove(index) {
            console.log(index);
            this.removeList.data_name = this.msgList[index].data_name
            this.removeList.old_data_name = this.msgList[index].data_name
            this.removeList.data_link = this.msgList[index].data_link
            this.removeList.user_name = this.msgList[index].user_name 
            this.removeList.dept_id = this.dept_id
            console.log(this.removeList);
        },
        confirm() {
            reqRemoveDeptMsg(this.removeList).then((res) => {
                console.log(res);
                setTimeout(() => {
                    if (res.code == 0) {
                        this.$message.success('删除资源成功');
                    } else {
                        this.$message.error('删除资源失败');
                    }
                }, 600);
            })
            setTimeout(() => {
                this.getList()
            }, 500);
        },
        // 改
        showModals(index) {
            console.log(index);
            this.visibles = true;
            this.oldziyuan = '原资源内容：' + this.msgList[index].data_link
            this.changeList.data_name = this.msgList[index].data_name
            this.changeList.old_data_name = this.msgList[index].data_name
            this.changeList.user_name = this.msgList[index].user_name 
            this.changeList.dept_id = this.dept_id
            console.log(this.changeList);
        },
        handleOks(e) {
            this.confirmLoadings = true;
            setTimeout(() => {
                this.visibles = false;
                this.confirmLoading = false;
            }, 500);
            console.log(this.changeList);
            reqChangeDeptMsg(this.changeList).then((res) => {
                console.log(res);
                setTimeout(() => {
                    if (res.code == 0) {
                      this.changeList.data_link=''
                        this.$message.success('修改资源成功');
                    } else {
                      this.changeList.data_link=''
                        this.$message.error('修改资源失败');
                    }
                }, 600);
            });
            setTimeout(() => {
                this.getList()
            }, 500);
        },
        handleCancels(e) {
          this.changeList.data_link=''
            this.visibles = false;
        },
    },
    mounted() {
        reqGetDeptId(this.askMsg).then((res) => {
            // console.log(res);
            this.deptMsg = res.data
            console.log(this.deptMsg);
            // 页面挂载展示第一个数据
            this.askMsg.dept_id = this.deptMsg[0].dept_id
            this.dept_id = this.deptMsg[0].dept_id
            console.log(this.askMsg.dept_id);
            this.getList()
        })
    },
};
</script>

<style scoped>
.main {
    width: 100%;
}

.top {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    margin-left: 10px;
    height: 50px;
    line-height: 50px;
    background-color: #eaf4fe;
}

.top td {
    width: 25%;
}

.content {
    margin-top: 0px;
    background-color: #fff;
}

.content:hover {
    background-color: #eaf4fe;
}

.goon {
    margin-left: 5px;
}

.addinput {
    margin-top: 20px;
}
</style>